<template>
  <view class="paymentPassword">
    <topTitle />
    <view class="com">
      <view>{{
        myUserInfo.payment_password_set ? "修改支付密碼" : "設置支付密碼"
      }}</view>
      <view>請設置支付密碼，用於支付驗證</view>
    </view>
    <view class="ipts">
      <view v-if="myUserInfo.payment_password_set">
        <view>原支付密碼</view>
        <view>
          <up-input
            placeholder="請輸入6位数字密碼"
            border="none"
            v-model="payment_password3"
            type="number"
            clearable
            :password="!showPsw3"
            maxlength="6"
          >
            <template #suffix>
              <i
                @tap="showPsw3 = !showPsw3"
                :class="showPsw3 ? 'open' : 'eye'"
              ></i>
            </template>
          </up-input>
        </view>
      </view>
      <view>
        <view>支付密碼</view>
        <view>
          <up-input
            placeholder="請輸入6位数字密碼"
            border="none"
            v-model="payment_password"
            type="number"
            clearable
            :password="!showPsw"
            maxlength="6"
          >
            <template #suffix>
              <i
                @tap="showPsw = !showPsw"
                :class="showPsw ? 'open' : 'eye'"
              ></i>
            </template>
          </up-input>
        </view>
      </view>
      <view>
        <view>確認支付密碼</view>
        <view>
          <up-input
            placeholder="請再次輸入6位数字密碼"
            border="none"
            v-model="payment_password2"
            clearable
            type="number"
            maxlength="6"
            :password="!showPsw2"
          >
            <template #suffix>
              <i
                @tap="showPsw2 = !showPsw2"
                :class="showPsw2 ? 'open' : 'eye'"
              ></i>
            </template>
          </up-input>
        </view>
      </view>
    </view>
    <view class="btn">
      <up-button
        v-if="!myUserInfo.payment_password_set"
        :disabled="
          !(payment_password?.length === 6 && payment_password2?.length === 6)
        "
        text="确认设置"
        @tap="PaymentPwSetFn"
        type="primary"
      ></up-button>
      <up-button
        v-if="myUserInfo.payment_password_set"
        :disabled="
          !(
            payment_password?.length === 6 &&
            payment_password2?.length === 6 &&
            payment_password3?.length === 6
          )
        "
        text="确认修改"
        @tap="PaymentPwUpdateFn"
        type="primary"
      ></up-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import { PaymentPwSet, UserInfo, PaymentPwUpdate } from "@/api/UserApi";
const instance = getCurrentInstance()?.appContext.config.globalProperties;

let myUserInfo = ref();
myUserInfo.value = uni.getStorageSync("userInfo");
let showPsw = ref<boolean>(false);
let showPsw2 = ref<boolean>(false);
let showPsw3 = ref<boolean>(false);
let payment_password = ref<string>();
let payment_password2 = ref<string>();
let payment_password3 = ref<string>();
// 设置支付密码
const PaymentPwSetFn = async () => {
  if (payment_password.value != payment_password2.value) {
    uni.showToast({
      title: "两次密码输入不一致",
      icon: "none",
    });
    return;
  }

  await PaymentPwSet({
    payment_password: instance?.getRsaCode(payment_password.value),
  });
  initFn();
};

const PaymentPwUpdateFn = async () => {
  if (payment_password.value != payment_password2.value) {
    uni.showToast({
      title: "两次密码输入不一致",
      icon: "none",
    });
    return;
  }

  await PaymentPwUpdate({
    payment_password: instance?.getRsaCode(payment_password3.value),
    new_payment_password: instance?.getRsaCode(payment_password.value),
  });
  initFn();
};

const initFn = async () => {
  myUserInfo.value.payment_password_set = true;
  payment_password.value = "";
  payment_password2.value = "";
  payment_password3.value = "";
  uni.showToast({
    title: "修改成功",
    icon: "none",
  });
  await UserInfo();
  instance?.goBack(1);
};
UserInfo();
</script>
<style scoped lang="scss">
@import "../../static/scss/pay.scss";
</style>
